<template>
    <div class="main message-list">
      <section>
        <div v-if="rightsButtons['add']" class="btn-block">
          <router-link :to="{name: 'messageMsgAdd'}">
            <el-button type="success" size="small" icon="el-icon-circle-plus" plain>新建消息</el-button>
          </router-link>
        </div>
        <search-form :listQuery="listQuery" :queryConfig="queryConfig" :labelWidth="100" :search="search"/>
        <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
            <el-table-column align="center" label="标题" prop="title" min-width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                  <router-link v-if="rightsButtons['view']" :to="{ name: 'messageMsgView', params: { id: scope.row.messageId } }">
                      <span style="color: #409eff">{{scope.row.title}}</span>
                  </router-link>
                  <template v-else>{{scope.row.title}}</template>
              </template>
            </el-table-column>
            <!--<el-table-column align="center" label="内容" prop="content" min-width="200" show-overflow-tooltip></el-table-column>-->
            <el-table-column align="center" label="消息类别" prop="businessType" width="100">
              <template slot-scope="scope" v-if="scope.row.businessType">
                {{businessTypeData[scope.row.businessType-1]}}
              </template>
            </el-table-column>
            <el-table-column align="center" label="用户角色" prop="pushTargetList" min-width="200">
              <template slot-scope="scope">
                <template v-if="scope.row.pushTargetLimit === 'UNLIMIT'">
                    所有
                </template>
                <template v-else-if="scope.row.pushTargetList && scope.row.pushTargetList.length && scope.row.pushTargetList.filter(i => i.targetType==='BY_ROLE').length">
                    <span v-for="(item, index) in scope.row.pushTargetList.filter(i => i.targetType==='BY_ROLE')" :key="index">
                        {{index?'、':''}}{{roleData[item.targetValue]}}
                    </span>
                </template>
                <template v-else> - </template>
              </template>
            </el-table-column>
            <el-table-column align="center" label="用户手机号" prop="pushTargetList" min-width="230" show-overflow-tooltip>
              <template slot-scope="scope">
                <template v-if="scope.row.pushTargetLimit === 'UNLIMIT'">
                    所有
                </template>
                <div style="display: inline-block;text-align: left" v-else-if="scope.row.pushTargetList && scope.row.pushTargetList.length && scope.row.pushTargetList.filter(i => i.targetType==='BY_MOBILE').length">
                    <span v-for="(item, index) in scope.row.pushTargetList.filter(i => i.targetType==='BY_MOBILE')" :key="index">{{index?',':''}}{{item.targetValue}}</span>
                </div>
                <template v-else> - </template>
              </template>
            </el-table-column>
            <el-table-column align="center" label="发送类型" prop="pushTime" width="120">
              <template slot-scope="scope">
                <template v-if="scope.row.triggerType">
                    {{scope.row.triggerType===2?'定时发送':'立即发送'}}
                </template>
                <template v-else> - </template>
              </template>
            </el-table-column>
            <el-table-column align="center" label="发送时间" prop="pushTime" width="156">
              <template slot-scope="scope">
                <template v-if="scope.row.triggerType === 1 && scope.row.state === 2">{{formatDate(scope.row.createdAt, 'YYYY-MM-DD HH:mm:ss')}} </template>
                <template v-else-if="scope.row.pushTime">
                    {{formatDate(scope.row.pushTime, 'YYYY-MM-DD HH:mm:ss')}}
                </template>
                <template v-else> - </template>
              </template>
            </el-table-column>
            <el-table-column align="center" label="发送状态" prop="state" width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.state">{{stateData[scope.row.state]}}</span>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="创建时间" prop="pushTime" width="156">
              <template slot-scope="scope">
                <template v-if="scope.row.createdAt">
                    {{formatDate(scope.row.createdAt, 'YYYY-MM-DD HH:mm:ss')}}
                </template>
                <template v-else> - </template>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="160" v-if="rightsButtons['edit'] || rightsButtons['cancel']">
              <template slot-scope="scope">
                <template v-if="scope.row.state">
                  <template v-if="scope.row.businessType===1 || scope.row.businessType===4">
                      <el-button v-if="rightsButtons['edit'] && ((scope.row.state===1 && scope.row.triggerType===2) || scope.row.state===3 || scope.row.state===4)" type="primary" size="mini" plain @click="$router.push({ name: 'messageMsgEdit', params: { id: scope.row.messageId} })">编辑</el-button>
                  </template>
                  <el-button v-if="rightsButtons['cancel'] && (scope.row.state===1 && scope.row.triggerType===2)" type="danger" size="mini" plain @click="cancelPush(scope.row.messageId)">取消</el-button>
                  <template v-if="scope.row.state === 2"> - </template>
                </template>
                <template v-else> - </template>
              </template>
            </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="listQuery.pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="listQuery.pageSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="listTotal">
        </el-pagination>
      </section>
    </div>
</template>

<script>
  import searchForm from '@/components/searchForm/index'
  export default {
    name: 'messageMsg',
    components: {
      searchForm
    },
    data() {
      return {
        businessTypeData: ['官方通知', '服务通知', '交易物流', '碧选活动'],
        roleData: ['普通用户', '兰蜜', '大区', '董事'],
        stateData: ['', '未发送', '发送成功', '发送失败', '取消发送'],

        listLoading: false,
        listQuery: {
          title: '',
          fromTime: '',
          toTime: '',
          businessType: 0,
          pageIndex: 1,
          pageSize: 10,

          createDate: []
        },
        queryConfig: [
          {
            prop: 'title',
            type: 'input',
            label: '标题'
          },
          {
            prop: 'createDate',
            type: 'daterange',
            label: '创建时间'
          },
          {
            prop: 'businessType',
            type: 'select',
            label: '消息类别',
            data: [
              { label: '全部', value: 0 },
              { label: '官方通知', value: 1 },
              { label: '碧选活动', value: 4 }
            ]
          }
        ],
        list: [],
        listTotal: 0
      }
    },
    created() {
      this.getList();
    },
    methods: {
      // 获取列表
      getList() {
        let tFlag = this.listQuery.createDate && this.listQuery.createDate.length;
        this.listQuery.fromTime = tFlag ? this.listQuery.createDate[0]:'';
        this.listQuery.toTime = tFlag ? this.listQuery.createDate[1]:'';
        this.listLoading = true;
        this.request({
          url: '/mc-manage/messages',
          method: 'get',
          params: { ...this.listQuery, createDate: '' }
        }).then(({data, totalCount}) => {
          this.list = data;
          this.listTotal = totalCount;
          this.listLoading = false;
        }).catch(err => {
          console.log(err);
          this.list = [];
          this.listTotal = 0;
          this.listLoading = false;
        });
      },
      search () {
        this.listQuery.pageIndex = 1;
        this.getList();
      },
      handleSizeChange (value) {
        this.listQuery.pageSize = value;
        this.getList()
      },
      handleCurrentChange(val){
        this.listQuery.pageIndex = val;
        this.getList();
      },
      cancelPush(messageId){
        this.$confirm('此操作不可恢复, 是否继续取消发送操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.request({
            url: `/mc-manage/messages/cancel/${messageId}?userId=${this.$store.getters.userId}`,
            method: 'put'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '取消成功!'
            });

            setTimeout(this.getList, 2100);
          }).catch(err => {
            console.log(err);
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      }
    }
  }
</script>

<style lang="scss">
    .message-list>section{
        padding: 24px;
        background: #fff;
    }
</style>
